<template>
  <div>
    <el-table style="width:100%"
              :data="tableData.list"
              :show-summary='true'
              :v-loading='loading'
              :summary-method='summary'>
      <el-table-column label="邦保养卡号"
                       width="120"
                       align="center">
        <template slot-scope="scope">
          <el-popover placement="top-start"
                      title="邦保养卡号"
                      width="200"
                      trigger="hover"
                      :content="scope.row.card_number">
            <el-button type="text"
                       class="ellipsis"
                       slot="reference">{{scope.row.card_number}}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="用户名称"
                       prop="name"
                       align="center"></el-table-column>
      <el-table-column label="联系电话"
                       prop="phone"
                       width="110"
                       align="center"></el-table-column>
      <el-table-column label="车辆类型"
                       width="120"
                       prop="car_type"
                       align="center">
        <template slot-scope="scope">
          <el-popover placement="top-start"
                      title="车辆类型"
                      width="270"
                      trigger="hover"
                      :content="scope.row.car_type">
            <el-button type="text"
                       class="ellipsis"
                       slot="reference">{{scope.row.car_type}}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="车排量"
                       prop="series"
                       align="center"></el-table-column>
      <el-table-column label="用油名称"
                       prop="oil_name"
                       width="120"
                       align="center">
        <template slot-scope="scope">
          <el-popover placement="top-start"
                      title="用油名称"
                      width="270"
                      trigger="hover"
                      :content="scope.row.oil_name">
            <el-button type="text"
                       class="ellipsis"
                       slot="reference">{{scope.row.oil_name}}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="卡金额"
                       prop="card_price"
                       align="center"></el-table-column>
      <el-table-column label="剩余次数"
                       prop="remain_times"
                       width="130"
                       align="center"></el-table-column>
      <el-table-column label="售卡时间"
                       width="120"
                       prop="sale_time"
                       align="center">
        <template slot-scope="scope">
          <el-popover placement="top-start"
                      title="售卡时间"
                      width="200"
                      trigger="hover"
                      :content="scope.row.sale_time">
            <el-button type="text"
                       class="ellipsis"
                       slot="reference">{{scope.row.sale_time}}</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <v-pagination :total='tableData.rows || 0'
                  :page.sync='page'
                  @pagination='init' />
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      page: 1,
      total: 0,
      loading: false
    }
  },
  props: {
    sid: {
      default: ''
    }
  },
  methods: {
    async init () {
      try {
        this.loading = true
        const res = await this.api.joinCard({ page: this.page, sid: this.sid })
        this.tableData = res.data
        this.loading = false
      } catch (err) {
        throw (err)
      }

    },
    summary ({ columns }) {  //合计
      let sum = []
      columns.forEach((e, i) => {
        sum[i] = ''
      });
      sum[columns.length - 2] = `剩余总次数:${this.tableData && this.tableData.arr && this.tableData.arr.total_times}次`
      sum[columns.length - 1] = `总合计:${this.tableData && this.tableData.arr && this.tableData.arr.total}元`
      return sum;
    },
  },
  mounted () {
    this.init()
  }
}
</script>


